
var toolTips = {
	'joinOptions' : 'Enter your choice and click \"Join Event\" to join the event.  You may also click \"Forfeit Choice\" if you do not with to enter your own choice.',
};

window.onload = function () {
	/*if (sessionStorage['isModerator'] == undefined) {
		displaySignInForm();
	}
	else if (sessionStorage['eventType'] == "closed") {
		displayAddEdgeForm();
	}
	else {
		displayAddChoiceForm();
		addToolTipListeners();
	}*/
	
	displayAddEdgeForm();
}

function displaySignInForm() {
	var mainContent = document.getElementById('mainContent');
	mainContent.innerHTML = "<h1>Question goes here...</h1>" +
						"<h2>Sign In</h2>" +
						"<p>Name: <input type='text' name='username' id='username'/></p>" +
						"<p>Game ID: <input type='text' name='gameid' id='gameid' /></p>" +
						"<input type='button' value='Submit' id='btnSubmit'/>";
	document.getElementById('btnSubmit').addEventListener('click', sendSignInRequest, false);
}

function displayAddChoiceForm() {
	var mainContent = document.getElementById('mainContent');
	mainContent.innerHTML = "<h1>Question goes here...</h1>" +
							"<input type='text' id='choice' name='choice' size='55' /><br /><br />" +
							"<input type='button' id='submitChoice' value='Submit Choice' /><br /><br />" +
							"<section id='otherChoices'>" +
							"<h3>Other Player's Choices</h3>" +
							"<ul id='choiceList'><li>Test</li></ul>" +
							"</section>" +
							"<section class='buttonPanel'>" +
							"<ul>" +
							"<li class='button' id='btnForfeit'>Forfeit Choice and Join Event</li></ul>" +
							"<p><span class='tip' id='joinOptions'>[?]</span></p></section>";
	document.getElementById('submitChoice').addEventListener('click', sendAddChoiceRequest, false);
}

function sendAddChoiceRequest(event) {
	sendRequest(new addChoiceRequest("1", document.getElementById('choice').value));
}

function displayAddEdgeForm() {
	var mainContent = document.getElementById('mainContent');
	mainContent.innerHTML = "<h1>Question goes here</h1>" +
                        	"<p>Click between two vertical lines to add a new edge.</p>" +
                        	"<p>Round: X</p>" +
                        	"<p>It (is | is not) your turn.</p>" +
                        	"<canvas id='edgeCanvas' width='700' height='500'></canvas>";
                        	
	var canvas = document.getElementById('edgeCanvas');
    var context = canvas.getContext("2d");
    
    var canvasHeight = canvas.height;
    var canvasWidth = canvas.width;
    
    var numLines = 5; // TODO get this from server
    
    computeLineLocations(numLines, canvasWidth);
    drawLines(context, 'green', canvasHeight);
    
    canvas.addEventListener("click", addEdgeListener, false);
}
